<template>
  <div id ="main">
    <div class="box">
        <div class = "pic">
          <img src="../../static/images/1.jpg">
        </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/2.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/3.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/4.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/5.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/6.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/7.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/8.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/9.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/10.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/11.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/12.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/13.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/14.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/15.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/16.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/17.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/18.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/19.jpg">
      </div>
    </div>
    <div class="box">
      <div class = "pic">
        <img src="../../static/images/20.jpg">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
        return {
          msg:"瀑布流图片展示"
        }
    },
    mounted () {
        window.onload = ()=> {
          this.waterfall('main','box');

          window.onscroll = ()=> {
            var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
            var bodyHeight = document.documentElement.clientHeight || document.body.clientHeight;
            var op = document.getElementById('main');
            var oboxs = this.getByClassName(op, 'box');
            var bodyWidth = document.documentElement.clientWidth || document.body.clientWidth;
            var rowNum = Math.floor( bodyWidth / oboxs[0].offsetWidth);
            var lastH = op.offsetTop+oboxs[oboxs.length - 1].offsetTop + Math.floor(oboxs[oboxs.length - 1].offsetHeight / 2);
            console.log("滚动的高度："+scrolltop+" 页面高度："+bodyHeight+"  最后一张图片的高度："+lastH)
            if(scrolltop+bodyHeight > lastH){
                for(var i=1;i<rowNum;i++){
                  //创建元素
                  var box = document.createElement('div');
                  box.className='box';
                  op.appendChild(box);
                  var pic = document.createElement('div');
                  pic.className = 'pic';
                  box.appendChild(pic)
                  var img =document.createElement('img');
                  img.src = '../static/images/'+Math.floor(Math.random() * 20 + 1)+'.jpg';
                  pic.appendChild(img);
                }
              this.waterfall('main','box');
            }
          }
        }
    },

    methods:{
      waterfall (pid, childclsName) {
        console.log("---------------------------------------------------------------重新加载-------------------------------------------------------")
        var op=document.getElementById(pid);
        var oboxs= this.getByClassName(op,childclsName);//document.getElementsByClassName(childclsName);
        var bodyWidth = document.documentElement.clientWidth || document.body.clientWidth;
        var rowNum = Math.floor( bodyWidth / oboxs[0].offsetWidth);
        var heightArr = new Array();
        for(var i=0; i<oboxs.length;i++){
            if(i<rowNum){
              heightArr.push(oboxs[i].offsetHeight)
            }else{
              var minh = Math.min.apply(null,heightArr);
              var index = this.getIndex(minh, heightArr);
              if ( i==(oboxs.length- 1)) {
                console.log("最小高度：" + minh + "     索引是：" + index);
              }
              oboxs[i].style.position="absolute";
              oboxs[i].style.top = minh + "px";;
              oboxs[i].style.left = oboxs[index].offsetLeft + "px";
              heightArr[index]+=oboxs[i].offsetHeight;
            }
        }
      },
      getIndex(minH,hArr) {
          for(var i=0;i<hArr.length;i++){
              if(minH == hArr[i]){
                  return i;
              }
          }
      },
      getByClassName(op,clsName){
          var rets = new Array();
          var boxs = op.getElementsByTagName("div");
          for(var i=0;i<boxs.length;i++){
              if(boxs[i].className == clsName){
                  rets.push(boxs[i])
              }
          }
          return rets;
      }

    }
  }

</script>


<style>

* {
  margin: 0;
  padding: 0;
}

#main {
  margin:0 auto;
  width:96%;
  position:relative;
}

.box {
  position: relative;
  float: left;

}

.pic {
  margin: 10px;
  box-shadow: inset;
  border:1px solid;
  border-radius: 6px;
}

img {
  width: 180px;
}

</style>
